<template>
  <div>
    <div class="VideoCategory-item" v-for="feed in feeds" :key="`feed-${feed.id}`">
      <img :src="feed.video.imgUrl" alt="">
      <p>{{feed.title}}</p>
      <p @click="toShowVideoInfo(feed)"></p>
      <div class="VideoCategory-item-footer">
        <div class="VideoCategory-item-footer-left">
          <img :src="`${feed.user.avatarurl}`">
          <span>{{feed.user.nickName}}</span>
        </div>
        <div class="VideoCategory-item-footer-right">
          <img src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/media/video-praise.png" alt="">
          <span>{{feed.upCount}}</span>
          <img src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/media/video-comment.png" alt="">
          <span>{{feed.shareCount}}</span>
          <img src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/media/video-share.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'VideoCategory',
  data () {
    return {
      id: '',
      feeds: []
    }
  },
  beforeRouteUpdate (to) {
    this.id = to.params.id
    this.$http.getVideoCategory(this.id).then((resp) => {
      const { feeds } = resp.data.data
      this.feeds = feeds
    }).catch(err => {
      console.log('异常：', err)
    })
  },
  created () {
    // console.log(this.$route)
    this.id = this.$route.params.id
    // console.log('param:', this.id)
    this.$http.getVideoCategory(this.id).then((resp) => {
      console.log(resp)
      const { feeds } = resp.data.data
      this.feeds = feeds
    })
  },
  methods: {
    ...mapMutations(['turnUrl']),
    toShowVideoInfo (feed) {
      this.turnUrl({
        url: feed.video.url,
        title: feed.title
      })
      this.$router.push('/videoinfo')
    }
  }
}
</script>

<style lang="scss" scoped>
.VideoCategory-item {
  position: relative;
  font-size: 20px;
  >img {
    width: 100%;
  }
  p:nth-of-type(1) {
    position: absolute;
    top: 10px;
    left: 5px;
    color: white;
  }
  p:nth-of-type(2) {
    position: absolute;
    width: 58px;
    height: 58px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: url(../assets/stop.png) no-repeat;
    background-size: 100% 100%;
  }
  .VideoCategory-item-footer {
    display: flex;
    justify-content:space-between;
    height: 40px;
    align-items: center;
    font-size: 14px;
    .VideoCategory-item-footer-left {
      display: flex;
      align-items: center;
      >img {
        border-radius: 50%;
      }
    }
    .VideoCategory-item-footer-right{
      display: flex;
      align-items: center;
    }
    img {
      width: 22px;
      height: 22px;
      padding: 0 7px;
      align-items: center;
    }
    span {
      padding: 0 7px;
    }
  }
}
</style>
